<template>
	<view>
		<!-- 头部 -->
		 <uni-nav-bar background-color="#3286ed" fixed="true" statusBar="true" color="#fff" title="添加客户" left-icon="left" right-text="提交"
		  @clickLeft="backFn" @clickRight="btnOkFn">        </uni-nav-bar>
		 <!-- 表单内容 -->
		<u--form class="form" labelPosition="left" labelWidth="100px" :model="form" :rules="rules" ref="form">
			<u-form-item label="客户名称" prop="name" borderBottom ref="item1">
				<u--input v-model="form.name" border="none" placeholder="请填写联系人"></u--input>
			</u-form-item>
			<u-form-item label="联系人" prop="contactName" borderBottom ref="item1">
				<u--input v-model="form.contactName" border="none" placeholder="请填写联系人"></u--input>
			</u-form-item>
			<u-form-item label="联系人电话" prop="contactTelephone" borderBottom ref="item1">
				<u--input v-model="form.contactTelephone" border="none" placeholder="请填写联系人电话"></u--input>
			</u-form-item>
			<u-form-item label="客户标签" prop="label" borderBottom ref="item1" @click="show=1">
				<u--input :disabled="true" disabledColor="#fff" v-model="form.labelName" border="none" placeholder="请填写客户标签"></u--input>
				<u-icon slot="right" name="arrow-right" @click="show=1"></u-icon>
			</u-form-item>
			<u-form-item label="客户来源" prop="source" borderBottom ref="item1" @click="show=2">
				<u--input :disabled="true" disabledColor="#fff" v-model="form.sourceName" border="none" placeholder="请填写客户标签"></u--input>
				<u-icon slot="right" name="arrow-right"  @click="show=2" ></u-icon>
			</u-form-item>
			<u-form-item label="所属地区" prop="region" borderBottom ref="item1" @click="show=3">
				<u--input :disabled="true" disabledColor="#fff" v-model="form.region" border="none" placeholder="请选择所属地区"></u--input>
				<u-icon slot="right" name="arrow-right"  @click="show=3" ></u-icon>
			</u-form-item>
			<u-form-item label="客户类别" prop="category" borderBottom ref="item1" @click="show=4">
				<u--input :disabled="true" disabledColor="#fff" v-model="form.categoryName" border="none" placeholder="请填写客户类别"></u--input>
				<u-icon slot="right" name="arrow-right"  @click="show=4" ></u-icon>
			</u-form-item>
			<u-form-item label="客户状态" prop="customerStatus" borderBottom ref="item1" @click="show=5">
				<u--input :disabled="true" disabledColor="#fff" v-model="form.customerStatusName" border="none" placeholder="请填写客户类别"></u--input>
				<u-icon slot="right" name="arrow-right"  @click="show=5" ></u-icon>
			</u-form-item>
			<u-form-item label="客户地址" prop="address" borderBottom ref="item1" @click="adressFn">
				<u--input :disabled="true" disabledColor="#fff" v-model="form.address" border="none" placeholder="请填写客户类别"></u--input>
				<u-icon slot="right" name="arrow-right"     @click="adressFn"></u-icon>
			</u-form-item>
		  <uni-data-picker class="picker" v-if="show==6" v-model="form.address" :localdata="adresslist" popup-title="选择地址"
		  @change="onchange" @popupclosed='show=false'   ref="adress"> </uni-data-picker>
		 <u-form-item label="备注" prop="remark" borderBottom ref="item1">
		     <u--textarea v-model="form.remark" placeholder="请输入内容" ></u--textarea>			 
		 </u-form-item>
		 <u-form-item label="流失原因" prop="lossReasons" borderBottom ref="item1"  @click="show=7">
		 	<u--input :disabled="true" disabledColor="#fff" v-model="form.lossReasonsName" border="none" placeholder="请填写客户类别"></u--input>
			<u-icon slot="right" name="arrow-right"    @click="show=7"></u-icon>
		 </u-form-item>
		 
		 <u-form-item label="流失备注" prop="lossRemark" borderBottom ref="item1">
		 	<u--textarea v-model="form.lossRemark" placeholder="请输入内容" ></u--textarea>
		 </u-form-item>
		 <u-form-item label="责任人名称" prop="chargePersonName" borderBottom ref="item1">
		 	<u--input v-model="form.chargePersonName" border="none" placeholder="请选择责任人"></u--input>
		 	<u-icon slot="right" name="arrow-right"></u-icon>
		 </u-form-item>
		 
		 <u-form-item label="协同人" @click="getCollabortor" prop="collaboratorName" borderBottom ref="item1">
		 	<u--input :disabled="true" disabledColor="#fff" v-model="form.collaboratorName" border="none" placeholder="请选择协同人"></u--input>
		 	<u-icon slot="right" name="arrow-right"></u-icon>
		 </u-form-item>
		 <u-form-item @click="show=8" label="最后跟进时间" prop="finalFollowTime" borderBottom ref="item1">
		 	<input :disabled="true" disabledColor="#fff" type="text" v-model="form.finalFollowTime">
		 	<u-icon slot="right" name="arrow-right"></u-icon>
		 </u-form-item>
		 
	</u--form>
	<!-- 客户来源 -->
	<u-picker :closeOnClickOverlay="true" @close="show=false" :show="show==2" :columns="sourceOptions" keyName="dictLabel" @cancel="show=false" @confirm="checkedFn"></u-picker>
	<!-- 客户标签 -->
	<u-picker :closeOnClickOverlay="true" @close="show=false" :show="show==1" :columns="labelOptions" keyName="dictLabel"	@cancel="show=false" @confirm="checkedFn"></u-picker>
	<!-- 所属地区 -->
	<u-picker :closeOnClickOverlay="true" @close="show=false" :show="show==3" :columns="AdressOptions" keyName="text"	@cancel="show=false" @confirm="checkAdress"></u-picker>
	<!-- 客户类别 -->
	<u-picker :closeOnClickOverlay="true" @close="show=false" :show="show==4" :columns="categoryOptions" keyName="dictLabel" @cancel="show=false" @confirm="checkedFn"></u-picker>
	<!-- 客户状态 -->
	<u-picker :closeOnClickOverlay="true" @close="show=false" :show="show==5" :columns="customerStatusOptions" keyName="dictLabel"	@cancel="show=false" @confirm="checkedFn"></u-picker>
	<!-- 流失原因 -->
	<u-picker :closeOnClickOverlay="true" @close="show=false" :show="show==7" :columns="lossReasonsOptions" keyName="dictLabel" @cancel="show=false" @confirm="checkedFn"></u-picker>
	<!-- 最后跟进时间 -->
	<u-datetime-picker :closeOnClickOverlay="true" @close="show=false" @cancel="show=false" @confirm="Time"  :show="show==8"    v-model="dateNow"   mode="date"   ></u-datetime-picker>
	
	
	
	<u-toast ref="uToast"></u-toast>
	<!-- 提示框 -->
		<u-modal showConfirmButton showCancelButton @confirm="BtnModel" @cancel="BtnShow=false" :show="BtnShow" title="提示" content='是否确认提交'></u-modal>
	</view>
</template>

<script>
	import { getDicts } from '@/api/dictionary/index.js';
	import {provinceNameList} from '@/api/region/region.js';
	import {addCustomer,getCustomer} from '@/api/customer.js'
	import{getInfo} from '@/api/login.js'
	export default {
		name:"Add",
		data() {
			return {
				form:{
					name:'',
					source:'',
					sourceName:'',
					contactName:'',
					customerStatus:'',
					customerStatusName:'',
					label:'',
					labelName:'',
					contactTelephone:'',
					region:'',
					category:'',
					categoryName:'',
					address:'',
					lossReasons:'',
					lossReasonsName:'',
					lossRemark:'',
					chargePersonId:'',
					chargePersonName:'',
					collaboratorId:'',
					collaboratorName:'',
					finalFollowTime:'',
					adress:'',

				},
				rules:{
					name:[{type: 'string',required: true,message: '请输入客户名称',trigger: ['blur', 'change']}],
					contactName:[{type: 'string',required: true,message: '请输入联系人',trigger: ['blur', 'change']}],
					contactTelephone:[{type: 'string',required: true,message: '请输入联系电话',trigger: ['blur', 'change']},
					{	validator: (rule, value, callback) => {
						return uni.$u.test.mobile(value);
					},
					 message: '手机号码不正确',trigger: ['change','blur'],}],
					label:[{type: 'string',required: true,message: '请选择客户标签',trigger: ['blur', 'change']}],
					source:[{type: 'string',required: true,message: '请选择客户来源',trigger: ['blur', 'change']}],
					region:[{type: 'string',required: true,message: '请选择所属区域',trigger: ['blur', 'change']}],
					category:[{type: 'string',required: true,message: '请选择客户类别',trigger: ['blur', 'change']}],
					customerStatus:[{type: 'string',required: true,message: '请选择客户状态',trigger: ['blur', 'change']}],
					adress:[{type: 'string',required: true,message: '请选择客户地址',trigger: ['blur', 'change']}],
				},
				show:0,
				labelOptions:[],//标签选项
				sourceOptions:[],//客户来源
				AdressOptions:[],//项目区域
				categoryOptions:[],//客户类别
				customerStatusOptions:[],//客户状态
			    adresslist:[],//项目地址
				lossReasonsOptions:[],//流失原因
				dateNow:'',//当前时间
				BtnShow:false,
			};
		},
		onLoad(e){
			console.log(e);
			console.log(e.id);
			
			
			this.getlabeloptions()
			this.getsourceOptions()
			this.getAdressOptions()
			this.getcategoryOptions()
			this.getcustomerStatusOptions()
			this.getlossReasons()
			this.getUserInfo()
			this.dateNow=this.getNowTime()
			if(e.id){
				// 走修改
				this.getCustomerinfo(e)
			}
		},
		onShow() {
			let that=this
			uni.$on('updateData',function(data){
				that.form.collaboratorName=data.userName
				that.form.collaborator=data.userId
			})
		},
		methods:{
			async getUserInfo(){
				let res=await getInfo()
				this.form.chargePersonName=res.user.userName
				this.form.chargePersonId=res.user.userId
			},
			// 修改 获取客户数据
			async getCustomerinfo(val) {
				let res=await getCustomer(val.id)
				console.log(res);
				this.form=res.data
				this.form.sourceName=this.getValue(this.sourceOptions[0],res.data.source)
			    this.form.labelName=this.getValue(this.labelOptions[0],res.data.label)
			    this.form.categoryName=this.getValue(this.categoryOptions[0],res.data.category)
			    this.form.lossReasonsName=this.getValue(this.lossReasonsOptions[0],res.data.lossReasons)
			    this.form.customerStatusName=this.getValue(this.customerStatusOptions[0],res.data.customerStatus)
				console.log(this.form.sourceName);
			},
			getValue(arr, item){
				for (var i = 0; i < arr.length; i++) {
				    if (item == arr[i].dictValue) {
				        return arr[i].dictLabel
				    }
				}
			},
			// 获取标签可选项
			async getlabeloptions(){
				 let res= await getDicts('biz_label')
				 
				 this.labelOptions.push(res.data)
			},
			async getsourceOptions(){
				let res=await getDicts('biz_source')
				this.sourceOptions.push(res.data)
				console.log(this.sourceOptions);
				
			},
			 async getcategoryOptions(){
			 	let res=await getDicts('biz_category')
			 	this.categoryOptions.push(res.data)
			 },
			  async  getAdressOptions(){
				  let res=await provinceNameList()
				  this.AdressOptions.push(res.rows)
				  // console.log(this.AdressOptions,'11');
				  this.adresslist= await this.getList(res.rows)
			  },
			  async getcustomerStatusOptions(){
				  let res=await getDicts('biz_customer_status')
				  this.customerStatusOptions.push(res.data)
			  },
			  async getlossReasons(){
			  	let res=await getDicts('biz_loss_reasons')
			  	this.lossReasonsOptions.push(res.data)
			  },
			async Time(e){
			  
				 this.form.finalFollowTime=await this.getTime(e.value)
				 console.log(this.form.finalFollowTime);
				 this.show=false
			 },
			 getTime(val){
			 	var date = new Date(val);
			 	var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			 	var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			 	var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			 	//修改月份格式
			 	if (month >= 1 && month <= 9) {
			 	  month = "0" + month;
			 	}
			 	//修改日期格式
			 	if (day >= 0 && day <= 9) {
			 	  day = "0" + day;
			 	}
			 	var currentFormatDate = `${year}-${month}-${day}`;
			 	return currentFormatDate
			 },
			// 选中事件
			checkedFn(e){
				  console.log(e);
				  if(e.value[0].dictType=='biz_label'){
					  this.form.label=e.value[0].dictValue
					  this.form.labelName=e.value[0].dictLabel
					  console.log(this.form.label);
					   this.show=false
				  }
				  if(e.value[0].dictType=='biz_source'){
					 
				  	this.form.source=e.value[0].dictValue
				  	this.form.sourceName=e.value[0].dictLabel
					console.log(this.form.source,e.value[0].dictValue);
					 this.show=false
				  }
				  if(e.value[0].dictType=='biz_category'){
					  
				  	this.form.categoryName=e.value[0].dictLabel
				  	this.form.category=e.value[0].dictValue
					 this.show=false
				  }
				if(e.value[0].dictType=='biz_customer_status'){
					
					this.form.customerStatusName=e.value[0].dictLabel
					this.form.customerStatus=e.value[0].dictValue
									 this.show=false
				}
				  if(e.value[0].dictType=='biz_loss_reasons'){
				  	this.form.lossReasonsName=e.value[0].dictLabel
				  	this.form.lossReasons=e.value[0].dictValue
				  					 this.show=false
				  }
				
			},
			getNowTime(){
				var date= new Date()
				// console.log(date);
				var month = date.getMonth() + 1;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate();
					// console.log(time);
				return time;
				
			},
			getList(data){
				data.forEach((item)=>{
					// console.log(item);
					if(item.label){
						item.text=item.label
						delete item.label
					}
					if(item.children){
						this.getList(item.children)
					}
				})
				 return data
			},
			checkAdress(e){
				this.form.region=e.value[0].text
				console.log(this.form.region,e);
				this.show=false
			},
			adressFn(){
				this.show=6
				this.$nextTick(()=>{
					this.$refs.adress.show()
				})
				
			},
			async onchange(e){
				let arr=[]
				e.detail.value.forEach((value)=>{
					arr.push(value.text)
				})
				this.form.address=arr.join('')
			 this.show=false
			},
			// 选择协同人
			getCollabortor(){
				uni.navigateTo({
					url:'/pages/dialog/user'
				})
			},
			backFn(){
				uni.navigateBack({
					delta:1
				})
			},
			async btnOkFn(){
				// 表单校验
					const res=await	this.$refs.form.validate()
					console.log(res);
					if(res){
						this.BtnShow=true
					}
			},
			// 弹框提示
			async BtnModel(){
				this.BtnShow=false
				const res1=await addCustomer(this.form)
				 this.$refs.uToast.show({
					 type:'success',
					 message:'添加成功',
					 complete(){
						 uni.redirectTo({
						 	url:'/pages/customer/index'
						 })
					 }
				 })
			}
		},
	}
</script>

<style lang="scss" scoped>
   .form{
	   background-color: #fff;
	   padding-left: 10px;
	   padding-right: 10px;
	   
	   .picker{
		      display: block;
	   }
   }
</style>
